<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        .layui-btn-container {
           margin-top: 10px;
        }

    </style>
</head>
<body>
<div class="layuimini-container ">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item" >

                        <div class="layui-inline">
                            <label class="layui-form-label">学生ID</label>
                            <div class="layui-input-inline ">
                                <input type="text" name="id" autocomplete="off" class="layui-input inputData">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">学生姓名</label>
                            <div class="layui-input-inline ">
                                <input type="text" name="username" autocomplete="off" class="layui-input inputData">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">学生班级</label>
                            <div class="layui-input-inline ">
                                <input type="text" name="classes" autocomplete="off" class="layui-input inputData">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">学生电话</label>
                            <div class="layui-input-inline ">
                                <input type="text" name="tel" autocomplete="off" class="layui-input inputData ">
                            </div>
                        </div>


                    </div>


                </form>

            </div>
        </fieldset>
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-lg layui-btn-danger data-delete-btn "lay-event="delete" id="delete">
                    <i class="layui-icon">&#xe640;</i>
                </button>
                    <button class="layui-btn layui-btn-normal layui-btn-lg data-add-btn "lay-event="add" id="add">
                        <i class="layui-icon">&#xe654;</i>
                    </button>
                    <button class="layui-btn layui-btn-normal layui-btn-lg data-add-btn "lay-event="add" id="search">
                        <i class="layui-icon"></i>
                    </button>
                <button class="layui-btn layui-btn-danger layui-btn-lg data-add-btn "lay-event="add" id="edit">
                    <i class="layui-icon">&#xe642;</i>
                </button>

            </div>
        <div action="" class="layui-form">
        <table class="layui-table" id="currentTableId" lay-filter="currentTableFilter">
            <thead>
            <tr class="layui-form-item"  >
                <th style="width: 50px" ><div><input type="checkbox" lay-filter="check" value="0" disabled title="选择"></div></th>
                <th ><div>学生ID</div></th>
                <th ><div>学生姓名</div></th>
                <th ><div>性别</div></th>
                <th ><div>联系方式</div></th>
                <th ><div>班级</div></th>
                <th ><div>年龄</div></th>
                <th><div>学生教师编号</div></th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        </div>
    </div>
</div>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table','layer'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layer = layui.layer;
        let jsonObj=JSON.parse(localStorage.getItem('stu'));
         $('#search').on('click',function (){//////////////////////查询
           //  $('#inputData').children('input')
             let inputData=$('.inputData')
            let I0=inputData[0].value
             let I1=inputData[1].value
             let I2=inputData[2].value
             let I3=inputData[3].value
             for (let i=0;i<jsonObj.length;i++){
                 if (jsonObj[i].id==I0||jsonObj[i].userName==I1||jsonObj[i].classes==I2||jsonObj[i].tel==I3){
                     layer.open({
                         type: 0,
                         title: '查询到的值<i class="layui-icon layui-icon-heart-fill" style="font-size: 30px; color: #1df569;"></i>',
                         content: '学生ID为:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-username" style="font-size: 30px; color: #1df569;"></i>'+jsonObj[i].id+
                             '<br/>学生姓名为:&nbsp;&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-user" style="font-size: 30px; color: #1E9FFF;"></i>'+jsonObj[i].userName+
                             '<br/>学生班级为:&nbsp;&nbsp;&nbsp; <i class="layui-icon layui-icon-home" style="font-size: 30px; color: #02f86d;"></i>'+jsonObj[i].classes+
                             '<br/>学生联系方式为: &nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #f8b402;"></i>'+jsonObj[i].tel,
                         skin: 'demo-class',
                         area: ['500px', '300px']
                     })
                     break;
             }else{
                     layer.open({
                         type: 0,
                         title: '未查询到的值<i class="layui-icon layui-icon-heart-fill" style="font-size: 30px; color: #fa0429;"></i>',
                         content:'<i class="layui-icon layui-icon-face-cry" style="font-size: 50px; color: #FF5722;"></i> 查无此人',
                         skin: 'demo-class',
                         area: ['500px', '300px']
                     })
                 }

             }

         })
        //选中
        form.on('checkbox(check)', function(data){
            console.log(data.elem); //得到checkbox原始DOM对象
            console.log(data.elem.checked); //是否被选中，true或者false
            console.log(data.value); //复选框value值，也可以通过data.elem.value得到
            console.log(data.othis); //得到美化后的DOM对象
            console.log(data);
            sc=data;
            let chose=sc.value;
            localStorage.setItem('schose',chose)
        });
        //修改按钮
        $('#edit').on('click',function (){
            var index = layer.open({   //弹出层定义
                title: '修改用户',
                type: 2,   //弹出页面
                shade: 0.2,
                maxmin:true,
                shadeClose: true,
                area: ['100%', '100%'],
                content: 'student-edit.html',
            });
            $(window).on("resize", function () {
                layer.full(index);
            })
         del();

            //localStorage.setItem('key',JSON.stringify(newKey))


          // localStorage.clear('edit');
        })
        //添加按钮
        $('#add').on('click',function (){
            var index = layer.open({   //弹出层定义
                title: '添加用户',
                type: 2,   //弹出页面
                shade: 0.2,
                maxmin:true,
                shadeClose: true,
                area: ['100%', '100%'],
                content: 'student-add.html',
            });
            $(window).on("resize", function () {
                layer.full(index);
            });
        })
        //全选按钮

        //删除
        $('#delete').click(function (){
          del();
            location.reload()
        })

    });
    /////////////////////////////////////////////////////////////////////////////////////////////
    //key 是json数据 IDC是数据长度用来定义Id序号 add是新增的数据 stu是学生的key
    if(localStorage.getItem('stu')==null){  //获取初始数据
        $.ajax({
            url:'../../api/stable.json',
            dataType:'json',
            success:function (data){
                let  jsonData=JSON.stringify(data.data)
                localStorage.setItem('stu',jsonData)
                location.reload()
                let index=data.data.length
                localStorage.setItem('sindex',index)
            }
        })
    }
    ///////////////////////添加新数据////////////////////
    let jsonObj=JSON.parse(localStorage.getItem('stu'));
    let oldData;
    if(JSON.parse(localStorage.getItem('add'))!=null){//////////////////判断是否初始化
        jsonObj.push(JSON.parse(localStorage.getItem('add')));
        oldData=JSON.stringify(jsonObj)
        localStorage.removeItem('add')
        localStorage.setItem('stu',oldData)
        $.each(jsonObj,function (i,n){
            $('tbody').append(`<tr>'
<td><div><input type="checkbox" lay-filter="check" value="${jsonObj[i].id}" title="选中"class="checkbox" ></div></td>
<td ><div>${jsonObj[i].id}</div></td>
<td ><div>${jsonObj[i].userName}</div></td>
<td ><div>${jsonObj[i].sex}</div></td>
<td ><div>${jsonObj[i].tel}</div></td>
<td ><div>${jsonObj[i].classes}</div></td>
<td ><div>${jsonObj[i].age}</div></td>
<td><div>${jsonObj[i].tid}</div></td>
</tr>`)
        })
    }else  {
        $.each(jsonObj,function (i,n){
            $('tbody').append(`<tr class="${jsonObj[i].id}">'
<td><div><input type="checkbox" lay-filter="check"  value="${jsonObj[i].id}" title="选中" class="checkbox"></div></td>
<td ><div>${jsonObj[i].id}</div></td>
<td ><div>${jsonObj[i].userName}</div></td>
<td ><div>${jsonObj[i].sex}</div></td>
<td ><div>${jsonObj[i].tel}</div></td>
<td ><div>${jsonObj[i].classes}</div></td>
<td ><div>${jsonObj[i].age}</div></td>
<td><div>${jsonObj[i].tid}</div></td>
</tr>`)
        })
    }


    //删除函数

   function del(){
       let myValue=sc.value;
       let delData=JSON.parse(localStorage.getItem('stu'))
       for(let i=0;i<delData.length;i++){
           if (delData[i].id==myValue){
               delData.splice(i,1);
               $('.'+myValue).remove()
               localStorage.setItem('stu',JSON.stringify(delData))

               break;
           }
       }
   }

</script>
</body>
</html>